import React, { useState, useEffect } from "react";
import { getShelfList } from "../../../components/api";
import style from "./shelf.module.css";
import { NavLink, useNavigate } from "react-router-dom";
import { AddOutline } from "antd-mobile-icons";
import { delShelfbook } from "../../../components/api";
import { Toast } from "antd-mobile";
import axios from "axios";
const { content, goSelect } = style;
interface IShelfList {
  id: string;
  name: string;
  author: string;
  cover: string;
}
export default function Shelf() {
  const navigate = useNavigate();
  let [del, setDel] = useState("none");
  let [shelfList, setShelfList] = useState<IShelfList[]>([]);
  const getShelf = async () => {
    let res = await getShelfList();
    // console.log(res, 'shelf')
    setShelfList(res.data);
  };
  //回退页面
  const back = () => {
    navigate("/me");
  };
  //点击管理
  const edit = () => {
    setDel("block");
  };
  //点击删除
  const delBook = async (id: any) => {
    console.log(id, "bookId");
    let res = await delShelfbook(id);
    console.log(res);
    if (JSON.stringify(res.data) === "{}") {
      Toast.show({
        icon: "success",
        content: "删除成功",
      });
      setTimeout(() => {
        getShelf();
      }, 1000);
    }
  };
  useEffect(() => {
    getShelf();
  }, []);
  return (
    <div className={content}>
      <h1>
        <span onClick={() => back()}>&lt;</span>
        <span>我的书架</span>
        <span onClick={() => edit()}>管理</span>
      </h1>
      {shelfList.map((item) => (
        <NavLink to={"/bookdetail/" + item.id}>
          <section key={item.id}>
            <span onClick={() => delBook(item.id)} style={{ display: del }}>
              X
            </span>
            <img src={item.cover} alt="" />
            <h2>{item.name}</h2>
            <p>{item.author}</p>
          </section>
        </NavLink>
      ))}
      <NavLink to={"/shuku"}>
        <div className={goSelect}>
          <div>
            <AddOutline fontSize={30} />
            <p> 去选书</p>
          </div>
        </div>
      </NavLink>
    </div>
  );
}
